<template>
  <div class="func">
    <div
      v-for="(item, index) in funcList"
      :key="index"
      @click="openFuncByCode(item)"
      :style="{display:item.done?'block':'none'}"
      class="items"
    >
      <div
        :style="{background: item.color}"
        class="icon_wrp"
      >
        <div>
          <i
            :class="`${item.icon}`"
            :style="{color: item.color}"
          />
        </div>
      </div>
      <p class="text">
        {{ item.label }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    lname: {
      type: String,
      default: '--',
    },
    vname: {
      type: String,
      default: '0',
    },
    vcolor: {
      type: String,
      default: 'rgb(45, 45, 45)',
    },
  },
  data() {
    return {
      funcList: [
        {
          label: '版权申请',
          code: 'VIP_SERVE_COPYRIGHT',
          color: 'rgb(254, 212, 91)',
          icon: 'jeicon jeicon-shield-c',
          done: true,
        },
        {
          label: '升级包下载记录',
          code: 'VIP_CLIENT_UPPF_LOG',
          color: 'rgb(32, 104, 225)',
          icon: 'jeicon jeicon-upgrade-download',
          done: true,
        },
        {
          label: '工单',
          code: 'VIP_CLIENT_JOBS_APPLY',
          color: 'rgb(253, 148, 119)',
          icon: 'jeicon jeicon-repair-order-management',
          done: true,
        },
        {
          label: '意见反馈',
          code: 'VIP_FEEDBACK',
          color: 'rgb(53, 190, 227)',
          icon: 'jeicon jeicon-feedback',
          done: true,
        },
        {
          label: 'APP包申请',
          code: 'VIP_APPWRAP_APPLY',
          color: 'rgb(89, 222, 179)',
          icon: 'jeicon jeicon-apply-for',
          done: false,
        },
        {
          label: '产品说明书',
          code: '',
          color: 'rgb(248, 104, 137)',
          icon: 'jeicon jeicon-apply-for',
          done: false,
        },
        {
          label: '项目任务单',
          code: 'VIP_JE_PRO_TASK',
          color: 'rgb(59, 154, 208)',
          icon: 'fa fa-tags',
          done: true,
        },
        {
          label: '项目维护',
          code: 'VIP_JE_PRO_PRODUCT',
          color: 'rgb(59, 121, 250)',
          icon: 'jeicon jeicon-project-maintenance',
          done: true,
        },
      ],
    };
  },
  methods: {
    openFuncByCode(item) {
      if (item.label === '产品说明书') {
        return JE.alert('敬请期待');
      }
      JE.openFuncByCode(item.code);
    },
  },
};
</script>

<style lang="scss" scoped>
  .func {
    margin-top: 30px;
    &:after {
      content: '';
      clear: both;
      display: table;
    }
    .items {
      width: 137.5px;
      height: 147.5px;
      float: left;
      cursor: pointer;
      .icon_wrp {
        border-radius: 12px;
        width: 56px;
        height: 56px;
        margin: 0 auto;
        position: relative;
        > div{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #ffffff;
          width: 70%;
          height: 70%;
          border-radius: 100%;
          > i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 25px;
          }
        }
      }
      .text {
        text-align: center;
        margin-top: 10px;
      }
    }
  }
</style>
